<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>二级菜单jq.html</title>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<style>
			.test ul {
				list-style: none;
				margin: 0px;
			}
			
			.test ul li {
				width: 100px;
				border: double;
				border-top-color: red;
				float: left;
				/*float: inherit;这是竖着排列*/
				padding: 0px;
			}
			
			.test ul li ul {
				padding: 0px;
			}
			
			.test ul li ul li {
				width: auto;
				border: groove;
				border-top-color: blue;
				float: inherit;
			}
			
			.open {
				color: aqua;
			}
		</style>
	</head>

	<body>
		<div class="test">
			<ul>
				<li>
					<a>一级菜单A</a>
					<ul>
						<li>
							<a href="#">二级菜单A1</a>
						</li>
						<li>
							<a href="#">二级菜单A2</a>
						</li>
						<li>
							<a href="#">二级菜单A3</a>
						</li>
					</ul>
				</li>
				<li>
					<a>一级菜单B</a>
					<ul>
						<li>
							<a href="#">二级菜单B1</a>
						</li>
						<li>
							<a href="#">二级菜单B2</a>
						</li>
						<li>
							<a href="#">二级菜单B3</a>
						</li>
					</ul>
				</li>
				<li>
					<a>一级菜单C</a>
					<ul>
						<li>
							<a href="#">二级菜单C1</a>
						</li>
						<li>
							<a href="#">二级菜单C2</a>
						</li>
						<li>
							<a href="#">二级菜单C3</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			/* js 语句 $(function(){});*/
			$(function() {
				$(".test li").children('ul').hide();
				$(".test li").click(
					/*找父亲（li）下面的ul*/
					function() {
						if($(this).children('ul').length>0){
							if($(this).children('a').hasClass('open')) {
							$(this).children('a').removeClass('open');
							$(this).find("ul").hide(500);

						} else {
							$(this).children('a').addClass('open');
							$(this).find("ul").show(500);
							

						}	
						} 

					}
				);

			});
		</script>

</html>